<template>
    <div class="swiper" @click="$router.push('/user')">
        <swiper class="swiperList" :options="swiperOption">
            <swiper-slide v-for="(item,i) in swiperList" :key="i">
                <!-- <router-link :to="item[1]"> -->
                    <van-image class="w-100" :src="item[0]" fit="fill" style="height: 11rem">
                    </van-image>
                <!-- </router-link> -->
                
            </swiper-slide>
             
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                swiperOption: {
                  spaceBetween: 30,
                  centeredSlides: true,
                  autoplay: {
                    delay: 2500,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: false
                },

            },
            position: 'index_lb',
            swiperList: []
            }
        },
        methods: {
            async getSwiperList(){
                const res = await this.$http.get(`index/business.do?position=index_lb`);
                this.swiperList = res.data
              
            }
        },
        created(){
            this.getSwiperList()
        }

    }
</script>

<style lang="scss" scoped>
    .swiper{
        height: 14rem;
        overflow: hidden;
    }
    .swiperList{
       
        position: relative;
    }
    // .swiper-pagination {
    //     position: absolute;
    //     left: 46%;
    //     bottom: 40%;
    //     width: 40px;
    //     display: flex;
    //     justify-content: space-between;

    // }
    
</style>